<template>
  <div id="Register">
    <div class="container">
      <div class="header">
        <span class="bobafont bobamusic-prev" @click="$router.back(-1)"></span>
      </div>
      <div class="appname"><p>网易云music</p></div>
      <van-form @submit="onSubmit" class="register">
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="bindU"
          name="bindU"
          label="网易云账号"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写网易云用户名' }]"
        />
        <van-field
          v-model="bindP"
          type="password"
          name="bindP"
          label="网易云密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写网易云密码' }]"
        />
        <div style="margin: 16px" class="arr">
          <van-button round block type="info" native-type="submit">
            注册
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { register } from "network/api/UserApi";
export default {
  data() {
    return {
      username: "",
      password: "",
      bindP:"",
      bindU:""
    };
  },
  methods: {
    onSubmit(values) {
      register(values).then((res) => {
        console.log(res);
        if (res.data.code === 500) {
          this.$notify({ type: "warning", message: res.data.message });
        }
        if (res.data.code === 200) {
          this.$notify({ type: "success", message: res.data.message });
          // 注册成功跳转到登录界面
          this.$router.back(-1)
        }
      });
    },
  },
};
</script>

<style>
#Register .container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(223, 20, 20);
  z-index: 2;
}
#Register .container .header {
  width: 100%;
  height: 50px;
  /* background: #acf6ef; */
  display: flex;
}
#Register .container .header .bobafont {
  color: #fff;
  font-size: 27px;
  line-height: 50px;
  margin-left: 10px;
}
#Register .container .appname {
  /* width: 40%;
    height: 8%; */
  /* background: ghostwhite; */
  margin: 0 auto;
  margin-top: 10%;
  display: flex;
}
#Register .container .appname p {
  color: #fff;
  margin: 0 auto;
  font-size: 30px;
  font-weight: bold;
}
#Register .container .register {
  margin-top: 200px;
  width: 80%;
  margin-left: 40px;
  border-radius: 10px;
}
#Register .container .register .arr {
  width: 250px;
  display: flex;
  padding: 10px;
}
</style>